import { defineComponent, watch, ref, onMounted, toRefs, computed } from 'vue'
const bluebox = require('@/assets/images/bluebox.png')
const blueboxmin = require('@/assets/images/blueboxmin.png')
const blueboxmax2 = require('@/assets/images/blueboxmax2.png')
const blueLabelBg = require('@/assets/images/blueLabelBg.png')
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    const { xdata, xdata2, data1, data2 } = toRefs(props.cdata.value)

    const categoryData = computed(() => {
      return xdata2.value.map((item) => {
        return {
          value: item,
          textStyle: {
            fontSize: 32,
            lineHeight: 130,
            color: '#fff'
          }
        }
      })
    })

    const dataMarkPoint = computed(() => {
      const max = Math.max(...data1.value)
      console.log('🚀 ~ dataMarkPoint ~ max:', max, data1.value.indexOf(max))
      const min = Math.min(...data2.value)
      return {
        max,
        min,
        maxIndex: data1.value.indexOf(max),
        minIndex: data2.value.indexOf(min)
      }
    })

    // 配置项
    let options = {
      title: {
        text: '2022-2023年气温变化趋势', // 主标题文本
        // subtext: '副标题', // 副标题文本
        left: 'center', // 标题水平位置：'left'/'center'/'right'
        top: '40', // 标题垂直位置
        textStyle: {
          color: '#fff', // 主标题文字颜色
          fontSize: 40 // 主标题文字大小
          // fontWeight: 'bold' // 主标题文字粗细
        }
        // subtextStyle: {
        //   color: '#ccc', // 副标题文字颜色
        //   fontSize: 30 // 副标题文字大小
        // },
        // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(8,45,74,0.85)',
        borderColor: 'rgb(140,255,74)', //设置边框颜色
        padding: 12,
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          fontSize: 40,
          color: '#fff'
        },
        formatter: (params) => {
          let arr = [...params]
          let str = ''
          arr.forEach((item, index) => {
            if (item.componentSubType == 'line') {
              str +=
                '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                item.color +
                ';"></span>' +
                item.seriesName +
                '  ' +
                item.data +
                '℃' +
                '<br />'
            } else {
              str +=
                '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                item.color +
                ';"></span>' +
                item.seriesName +
                '  ' +
                item.data +
                '<br />'
            }
          })
          str = arr[0].name + '<br />' + str
          return str
        }
      },
      legend: {
        top: '18%',
        textStyle: {
          fontSize: '32px',
          color: '#fff',
          padding: [0, 8]
        }
      },
      grid: {
        left: '40px',
        right: '26px',
        bottom: '10%',
        top: 200,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: xdata.value,
          triggerEvent: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
              padding: [14, 0, 0, 0],
              fontSize: 20,
              color: '#fff'
            }
          }
        },
        {
          type: 'category',
          data: categoryData.value,
          position: 'bottom',
          axisTick: {
            length: 50
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: true, // 显示横向分割线
            lineStyle: {
              color: 'rgba(255,255,255,0.2)', // 设置分割线的颜色
              width: 1, // 设置分割线的宽度
              type: 'dashed' // 设置分割线的类型，solid, dashed, dotted
            }
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2, // 设置线条粗细，单位是px
              color: '#fff', // 可以同时设置颜色
              type: 'solid' // 可以设置线条类型：'solid'|'dashed'|'dotted'
            }
          },
          axisLabel: {
            show: true,
            formatter: function (value) {
              return value + '℃' // 温度符号
            },
            color: '#fff',
            fontSize: '30px'
          }
        }
      ],
      series: [
        {
          name: '最高温',
          type: 'line',
          symbol: 'circle', //标记的图形为实心圆
          symbolSize: 20, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: 'rgba(255, 87, 51, 1)',
            borderColor: '#fff',
            borderWidth: 5
          },
          lineStyle: {
            color: 'rgba(255, 87, 51, 1)',
            width: 5
          },
          // data: [18.1, 35.6, 38.9, 16.2, 11.3, 16.1, 33.3, 3.5, 13.2, 15.1, 43.2]
          data: data1.value,
          markPoint: {
            symbol: `image://${bluebox}`,
            data: [
              {
                type: 'max',
                name: '最高点',
                xAxis: dataMarkPoint.value.maxIndex,
                yAxis: dataMarkPoint.value.max,
                symbolSize: [300, 50],
                symbolOffset: () => {
                  return dataMarkPoint.value.maxIndex == 10 ? ['-160px', '36%'] : ['0%', '0%']
                },
                label: {
                  color: '#42E0FF',
                  position: ['10px', '15px'],
                  fontSize: '20px',
                  // 添加百分号
                  // formatter: function ({ value }) {
                  //   // return value + '%'
                  //   // return '有记录以来持续时间最长、范围最广、强度最大的极端高温'
                  // },
                  // formatter: ['有记录以来持续时间最长、范围最广、', '强度最大的极端高温'].join('\n')
                  formatter: '江浙沪川等地出现极端高温'
                }
              },
              {
                type: 'max',
                name: '最高点',
                xAxis: 2,
                yAxis: 38.9,
                symbolSize: [330, 70],
                symbolOffset: () => {
                  return ['-570px', '35px']
                },
                label: {
                  color: '#42E0FF',
                  position: ['55px', '14px'],
                  fontSize: '20px',
                  // 添加百分号
                  // formatter: function ({ value }) {
                  //   // return value + '%'
                  //   // return '有记录以来持续时间最长、范围最广、强度最大的极端高温'
                  // },
                  formatter: ['有记录以来持续时间最长、范', '围最广、强度最大的极端高温'].join('\n')
                },
                symbol: `image://${blueboxmax2}`
              }
            ]
          }
        },
        {
          name: '最低温',
          type: 'line',
          symbol: 'circle', //标记的图形为实心圆
          symbolSize: 20, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: 'rgba(255, 195, 0, 1)',
            borderColor: '#fff',
            borderWidth: 5
          },
          lineStyle: {
            color: 'rgba(255, 195, 0, 1)',
            width: 5
          },
          // data: [-16.2, 0.1, 5.2, -0.3, -10.8, -3.5, 14.6, 34.3, -20.1, -7.5, 9.8]
          data: data2.value,
          markPoint: {
            symbol: `image://${blueboxmin}`,
            data: [
              {
                type: 'min',
                name: '最低点',
                symbolSize: [326, 42],
                symbolOffset: () => {
                  return ['-170px', '0px']
                },
                xAxis: dataMarkPoint.value.minIndex,
                yAxis: dataMarkPoint.value.min,
                label: {
                  color: 'rgba(255, 195, 0, 1)',
                  position: ['15px', '15px'],
                  fontSize: '20px',
                  // 添加百分号
                  // formatter: () => {
                  //   // return value + '%'
                  //   formatter: ['有记录以来持续时间最长、范围最广、', '强度最大的极端高温'].join('\n')
                  // }
                  formatter: '有记录以来12月最强寒潮'
                }
              }
            ]
          }
        }
      ]
    }

    onMounted(() => {
      if (chartRef.value) {
        chartRef.value.initChart(options)
      }
    })

    return () => {
      const height = '100%'
      const width = '100%'
      return <echart ref={chartRef} height={height} width={width} />
    }
  }
})
